<template>
  <div class="cmt-container">
    <h3>发表评论</h3>
    <hr />
    <textarea placeholder="请输入评论的内容(最多吐槽120字)" maxlength="120" v-model="msg"></textarea>
    <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>

    <div class="cmt-list">
      <div class="cmt-item" v-for="item1 in comments" :key="item1.cai">
        <div class="cmt-title">第{{item1.love}}楼&nbsp;&nbsp;{{item1.name}}&nbsp;&nbsp;{{item1.passtime}}</div>
        <div class="cmt-body">{{item1.text}}</div>
      </div>

    </div>

    <!-- plain  可以让按钮背景颜色变空 -->
    <!-- <mt-button type="danger" size="large" plain  @click="getMore">加载更多</mt-button> -->
    <mt-button type="danger" size="large" plain >加载更多</mt-button>
  </div>
</template>

<script>
import { Toast } from "mint-ui";

export default {
  data() {
    return {
      //   pageIndex:1 //这是默认展示第一页的数据
      comments: [],
      msg:''//评论输入的内容
    };
  },
  created(){
      this.getComments();
  },
  methods: {
    getComments() {
      // api/getcomments/:artid?pageIndex=1   这是请求的接口，此时的artid是从父组件中拿过来的，所以这里应该换成api/getcomments/"+this.id+"?pageIndex=1   是从props中拿到的，而且pageIndex不能写死，所以最后请求的url变为：
      // api/getcomments/"+this.id+"?pageIndex="this.pageIndex"
      this.$http
        .get("https://www.apiopen.top/satinApi?type=1&page=1")
        .then(result => {
          if (result.body.code == 200) {
            Toast("获取评论");
            console.log(result.body.data);
            // 这是获取一页的评论
            this.comments = result.body.data;
            // 这是解决第二页的评论不会覆盖第一页的    由于我页面中没有这个参数，所以只在这里做说明
            // this.comments = this.comments.concat(result.body.data);
          } else {
            Toast("获取评论失败......");
          }
        });
    },
    // 这个方法会只显示第二页的内容，不会展示第一页的了，所以问题出在了方法中。
    // getMore(){
    //     this.pageIndex++;
    //     this.getComments()
    // }
    // 这是发表评论
    postComment(){
        // 先校验用户输入的内容是否为空
        if(this.msg.trim().length ===0){
            return Toast('评论内容不能为空!');
        }



        // 如果用post发送请求的话需要有以下几个参数:
        // 参数1：请求的url
        // 参数2：提交给服务器的数据对象{concent:this.msg}
        // 参数3：定义提交时候表单中数据的格式{emulateJSON:true}
        // 下面这个地址是人家的api，由于我现在没有接口，所以只能参考项目的，下面get请求是可以拿到数据的，仅供参考 此时的评论内容参数是写死的，必须是content
        // this.$http.post('/api/postcomment' + this.$router.params.id,{content:this.msg.trim()}).then(function(result){
            //  if(result.body.statu ==0){
            //     //  1.手动拼接一个字符串，添加到comments最前面即可
            //     var cmt = {
            //         user_name:'匿名用户',
            //         add_time:new Date(),
            //         content:this.msg.trim()
            //     }
            //     this.comments.unshift(cmt);
            //     this.msg='';
            //  }
        // })




        this.$http.get("https://www.apiopen.top/satinApi?type=1&page=1")
        .then(result => {
          if (result.body.code == 200) {
            Toast("获取评论");
            console.log(result.body.data);
            // 这是获取一页的评论
            // this.comments = result.body.data;

            var cmt = {
                    name:'匿名用户',
                   passtime:new Date(),
                   text:this.msg.trim()
               }
              this.comments.unshift(cmt);
              this.msg='';
          } else {
            Toast("获取评论失败......");
          }
        })
    }
  }
  // props:['id']
};
</script>
<style scoped>
.cmt-container h3 {
  font-size: 18px;
  text-align: center;
}
.cmt-container textarea {
  font-size: 14px;
  height: 85px;
  margin: 0;
}
.cmt-list {
  margin: 5px 0;
  /* height: 600px; */
}
.cmt-list .cmt-item {
  font-size: 13px;
}
.cmt-list .cmt-title {
  background: #ccc;
  line-height: 35px;
}
.cmt-list .cmt-body {
  line-height: 35px;
  text-indent: 2em; 
  /* height: 600px; */
}
</style>

